<template name="ys-bottom-nav">
<view class="ys-bottom-nav">
    <view v-for="(item, index) in list" :key="index" class="nav-item" bindtap="viewTap">
        <view :class="item.icon"></view>
        <text :class="item.active">{{item.name}}</text>
        <view v-if="item.icon_big" :class="item.icon_big">{{item.num}}</view>
    </view>
</view>
</template>

<script>
    export default {
        name: "ys-bottom-nav",
        props: {
            list: {
                type: Array,
                default: () => []
            }
        },
        mounted() {
        },
        data() {
            return {

            };
        },
        methods: {

        }
    }        
</script>

<style lang="scss">
    .ys-bottom-nav {
        position: fixed;
        height: 100upx;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        border-top: 1upx solid #ccc;
        z-index: 20;        
        .nav-item {
            width: 192upx;
            text-align: center;
            position: relative; 
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;            
            .ys-icon {
                display: block;
                margin: 0 auto;
                height: 44upx;
                width: 44upx;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;                
            }
            .ys-tab-label {
                display: block;
                font-size: 20upx;
                color: #b3b3b3;
                text-align: center;
                margin-top: 8upx;   
            }
            .active {
                color:#e60013;
            }      
            .ys-icon-home {
                background-image: url('');
            }
            .cart-icon {
                position: absolute;
                width: 108upx;
                height: 108upx;
                top: -48upx;
                left: 50%;
                transform: translateX(-50%);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
                font-size: 20upx;
                color: #fff;
                line-height: 120upx;
                text-align: center;
                padding: 0 24rpx 0 36upx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                box-sizing: border-box;
                background-image: url('');               
            }
            .ys-icon-my {
                background-image: url('');
            }          
        }
    }
</style>
